<template>
  <div class="hello">
    <canvas id="canvas" ></canvas>
    <div id="number"></div>
    <!-- <canvas id="canvas" ></canvas> -->
  </div>
</template>

<script>
// import {main} from './webglTest'
// import { main } from './webgl-particle'; 
import { renderCircle } from './webgl_renderCircle';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted(){
    // main(document.querySelector("#canvas"));
    renderCircle(document.querySelector("#canvas"),document.querySelector("#number"),500,500,{
      now:50,
      total:100,
      startColor:'#3DE6FF',
      endColor:'#2351FF',
      bottomColor:'#000'
    });
  },
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.hello{
  background-color: #000;
  width: 100vw;
  height: 100vh;
}
</style>
